<template>
  <div class="stu_aside">
    <!-- 考生信息区域 -->
    <div>
      <el-form
        v-model="stuForm"
        :cell-style="cellStyle"
        :header-cell-style="rowClass"
      >
        <el-descriptions title="用户信息" :column="1" border>
          <el-descriptions-item label="姓名">{{
            stuForm.name
          }}</el-descriptions-item>
          <el-descriptions-item label="学号">{{
            stuForm.number
          }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>

    <!-- 倒计时 -->
    <div class="countDown">
      <span>考试即将开始</span>
      <br />
      <el-button v-show="show" @click="startExam" round>开始考试</el-button>
      <el-button disabled="disabled" v-show="!show" round
        >开始考试（{{ count }}s）</el-button
      >
    </div>

    <!-- 考生须知 -->
    <div style="margin-top: 110px">
      <el-card>
        <h3 class="title">考生须知</h3>

        <p>1.考生应按规定的时间入场，开始考试后15分钟禁止迟到考生进入考场。</p>
        <p>
          2.考生入场时须主动出示《准考证》以及有效身份证件(身份证、军人、武警人员证件、未成年人的户口本、公安户籍部门开具的《身份证》号码证明、护照或者港、澳、台同胞证件)，接受考试工作人员的核验，并按要求在“考生花名册”上签自己的姓名。
        </p>
        <p>
          3.考生只准携带必要的文具入场,如铅笔、签字笔、毛笔、水粉水彩颜料等，具体要求见招考简章。禁止携带任何已完成作品以及各种无线通信工具(如寻呼机、移动电话)等物品。如发现考生携带以上禁带物品，考生将作为违纪处理，取消该次考试成绩。考场内不得擅自相互借用文具。
        </p>
        <p>
          4.考生入场后按号入座，将本人《准考证》以及有效身份证件放在课桌上，以便核验。
        </p>
      </el-card>
    </div>
    <br />
    <div class="back">
      <el-button type="primary" @click.native="logout()">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import { clearLoginInfo } from "@/api/common";
export default {
  name: "aside-com",
  data() {
    return {
      //考生信息
      stuForm: {
        name: "小碗",
        number: 154587,
      },
      //倒计时变量
      remainTime: "5",
      timer: null,
      count: null,
      show: true,
    };
  },

  props: {},

  mounted() {
    this.getCode();
  },

  methods: {
    //倒计时
    getCode() {
      let _this = this;
      _this.show = false;
      if (!_this.timer) {
        _this.count = this.remainTime;
        _this.show = false;
        _this.timer = setInterval(() => {
          if (_this.count > 0 && _this.count <= this.remainTime) {
            _this.count--;
          } else {
            _this.show = true;
            clearInterval(_this.timer);
            _this.timer = null;
          }
        }, 1000);
      }
    },

    //开始考试
    startExam() {
      console.log("考试开始");
      this.$router.push("/stuhome");
    },

    //退出登录
    logoutCommon(that) {
      that.axios
        .post(that.$httpApi.httpUrl("/student/logout"))
        .then(function (response) {
          if (response.data.code === 1) {
            that.$message({
              type: "success",
              message: response.data.message,
            });
            clearLoginInfo();
            setTimeout(function () {
              that.$router.push({ name: "login" });
            }, 1000);
          } else {
            that.$message({
              type: "error",
              message: response.data.message,
            });
          }
        });
    },

    // 退出验证提示
    logout() {
      let that = this;
      that
        .$confirm("确定退出系统吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.logoutCommon(that);
        });
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      return "text-align:center";
    },

    rowClass({ row, rowIndex }) {
      return "text-align:center";
    },
  },
  computed: {
    hourString() {
      return this.formatNum(this.hour);
    },
    minuteString() {
      return this.formatNum(this.minute);
    },
    secondString() {
      return this.formatNum(this.second);
    },
  },
};
</script>

<style lang="less" scoped>
.button {
  &:disabled {
    opacity: 1 !important;
    padding: 6px 13px 5px 13px !important;
    color: rgba(173, 173, 173, 1);
    border: 1px solid rgba(207, 176, 155, 1);
  }
}

.stu_aside {
  //background: rgba(1, 0, 0, 0.1);
  width: 800px;
  height: 100%;
  margin-left: 450px;
}
.countDown {
  padding-top: 50px;
  text-align: center;
  height: 80px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 30px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 400px;
}
.title {
  text-align: center;
}
.back {
  text-align: center;
}
</style>